<template>
    <div class="good-list">
        <!-- 商铺排序方式 -->
        <div class="sort-by">
            <span 
                :class="{ active: currentSort === '综合' }" 
                @click="sortBy('综合')"
            >
                综合
                <i class="sort-icon" :class="sortIconClass('综合')"></i>
            </span>
            <span 
                :class="{ active: currentSort === '价格' }" 
                @click="sortBy('价格')"
            >
                价格
                <i class="sort-icon" :class="sortIconClass('价格')"></i>
            </span>
            <span 
                :class="{ active: currentSort === '销量' }" 
                @click="sortBy('销量')"
            >
                销量
                <i class="sort-icon" :class="sortIconClass('销量')"></i>
            </span>
        </div>
        <!-- 商品列表 -->
        <div class="good-list-item">
            <ul class="good-list-item-list">
                <Goods v-for="good in goods" :key="good.id" :good="good" />
            </ul>
        </div>
        <!-- 分页 -->
        <div class="pagination" v-if="total > 0">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[12, 24, 36, 48]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Goods from '@/components/shop/Goods.vue'
import { getShopGoodsList } from '@/api/goods'

const props = defineProps({
    shopId: {
        type: Number,
        required: true
    }
})

// 排序相关
const currentSort = ref('综合')
const sortOrder = ref('desc')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)

// 商品数据
const goods = ref([])

// 排序图标类名
const sortIconClass = (type) => {
    if (currentSort.value !== type) return ''
    return sortOrder.value === 'asc' ? 'el-icon-top' : 'el-icon-bottom'
}

// 排序方法
const sortBy = (type) => {
    if (currentSort.value === type) {
        sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
    } else {
        currentSort.value = type
        sortOrder.value = 'desc'
    }
    // TODO: 调用排序接口
    fetchGoods()
}

// 获取商品数据
const fetchGoods = async () => {
    try {
        const res = await getShopGoodsList({
            shopId: props.shopId,
            sort: currentSort.value,
            page: currentPage.value,
            pageSize: pageSize.value
        })
        goods.value = res
    } catch (error) {
        console.error('获取商品列表失败:', error)
    }
}

// 分页方法
const handleSizeChange = (val) => {
    pageSize.value = val
    fetchGoods()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchGoods()
}
onMounted(() => {
    fetchGoods()
})
</script>

<style scoped>
.good-list {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.sort-by {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.sort-by span {
    margin-right: 30px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.sort-by span.active {
    color: #409eff;
}

.sort-icon {
    margin-left: 4px;
    font-size: 12px;
}

.good-list-item-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 1200px) {
    .good-list-item-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 992px) {
    .good-list-item-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 576px) {
    .good-list-item-list {
        grid-template-columns: 1fr;
    }
}
</style>
